<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理 - 任务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
    <link th:href="@{/css/requirements.css}" rel="stylesheet">
    <link th:href="@{/css/task-management.css}" rel="stylesheet">
</head>
<body>
    <!-- 主导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-kanban"></i> 任务管理系统
            </a>
            <div class="navbar-nav me-auto">
                <a class="nav-link" href="/dashboard">🏠 工作台</a>
                <a class="nav-link" href="/projects">📋 项目管理</a>
                <a class="nav-link" href="/requirements">📝 需求管理</a>
                <a class="nav-link active" href="/tasks">✅ 任务管理</a>
                <a class="nav-link" href="/developers">👥 开发者管理</a>
            </div>
            <div class="navbar-nav">
                <div class="nav-item">
                    <input type="search" class="form-control" placeholder="全局搜索..." id="globalSearch">
                </div>
                <a class="nav-link" href="/settings">⚙️ 系统设置</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航 -->
            <nav class="col-md-2 d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="bi bi-house"></i> 工作台
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/projects">
                                <i class="bi bi-folder"></i> 项目管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/requirements">
                                <i class="bi bi-file-text"></i> 需求管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/tasks">
                                <i class="bi bi-check-square"></i> 任务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/developers">
                                <i class="bi bi-people"></i> 开发者管理
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <!-- 页面头部 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">
                        <i class="bi bi-check-square"></i> 任务管理
                    </h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button type="button" class="btn btn-primary" id="newTaskBtn">
                            <i class="bi bi-plus-circle"></i> 新建任务
                        </button>
                    </div>
                </div>

                <!-- 筛选与搜索面板 -->
                <div class="card mb-4 filter-panel">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <button class="btn btn-link text-decoration-none p-0 text-start w-100" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                                <i class="bi bi-funnel"></i> 筛选与搜索
                                <i class="bi bi-chevron-down float-end"></i>
                            </button>
                        </h5>
                    </div>
                    <div class="collapse" id="filterCollapse">
                        <div class="card-body">
                        <div class="row g-3">
                            <!-- 搜索框 -->
                            <div class="col-md-3">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input type="text" class="form-control" id="searchInput" placeholder="搜索任务标题/描述..." th:value="${searchKeyword}">
                                </div>
                            </div>
                            <!-- 状态筛选 -->
                            <div class="col-md-2">
                                <label for="statusFilter" class="form-label">状态</label>
                                <select class="form-select" id="statusFilter" th:value="${filterStatus}">
                                    <option value="">全部</option>
                                    <option value="TODO">待办</option>
                                    <option value="IN_PROGRESS">进行中</option>
                                    <option value="PENDING_REVIEW">待验证</option>
                                    <option value="COMPLETED">已完成</option>
                                    <option value="BLOCKED">已阻塞</option>
                                    <option value="PAUSED">暂停</option>
                                    <option value="CANCELLED">已取消</option>
                                </select>
                            </div>
                            
                            <!-- 优先级筛选 -->
                            <div class="col-md-2">
                                <label for="priorityFilter" class="form-label">优先级</label>
                                <select class="form-select" id="priorityFilter" th:value="${filterPriority}">
                                    <option value="">全部</option>
                                    <option value="URGENT">紧急</option>
                                    <option value="HIGH">高</option>
                                    <option value="MEDIUM">中</option>
                                    <option value="LOW">低</option>
                                </select>
                            </div>
                            
                            <!-- 需求筛选 -->
                            <div class="col-md-2">
                                <label for="requirementFilter" class="form-label">需求</label>
                                <select class="form-select" id="requirementFilter" th:value="${filterRequirement}">
                                    <option value="">全部</option>
                                    <!-- 需求选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                            
                            <!-- 负责人筛选 -->
                            <div class="col-md-2">
                                <label for="assigneeFilter" class="form-label">负责人</label>
                                <select class="form-select" id="assigneeFilter" th:value="${filterAssignee}">
                                    <option value="">全部</option>
                                    <!-- 开发者选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                             
                             <!-- 操作按钮 -->
                             <div class="col-md-1 d-flex align-items-end">
                                 <button type="button" class="btn btn-outline-secondary me-1" id="resetFilterBtn" title="重置筛选">
                                     <i class="bi bi-arrow-clockwise"></i>
                                 </button>
                                 <button type="button" class="btn btn-outline-primary" id="applyFilterBtn" title="应用筛选">
                                     <i class="bi bi-funnel"></i>
                                 </button>
                             </div>
                         </div>
                        </div>
                     </div>
                 </div>

                 <!-- 任务列表 -->
                 <div class="card">
                     <div class="card-header d-flex justify-content-between align-items-center">
                         <div>
                             <h5 class="card-title mb-0">
                                 <i class="bi bi-list-task"></i> 任务列表
                             </h5>
                             <small class="text-muted">共 <span th:text="${totalTasks}">0</span> 个任务</small>
                         </div>
                         <div class="btn-group btn-group-sm" role="group">
                             <input type="checkbox" class="btn-check" id="selectAllCheckbox" autocomplete="off">
                             <label class="btn btn-outline-secondary" for="selectAllCheckbox">
                                 <i class="bi bi-check-all"></i> 全选
                             </label>
                         </div>
                     </div>
                     <div class="card-body p-0">
                         <div class="table-responsive">
                             <table class="table table-hover mb-0" id="taskTable">
                                 <thead class="table-light">
                                     <tr>
                                         <th width="50">
                                             <input type="checkbox" class="form-check-input" id="selectAllTasks">
                                         </th>
                                         <th width="80">ID</th>
                                         <th>任务标题</th>
                                         <th width="120" class="text-center">需求</th>
                                         <th width="120" class="text-center">状态</th>
                                         <th width="100" class="text-center">优先级</th>
                                         <th width="120" class="text-center">负责人</th>
                                          <th width="100" class="text-center">进度</th>
                                          <th width="150">操作</th>
                        </tr>
                    </thead>
                                  <tbody id="taskTableBody">
                                      <!-- 任务数据将通过JavaScript动态加载 -->
                                  </tbody>
                </table>
                
                <!-- 空状态 -->
                <div class="text-center py-5 d-none" id="emptyState">
                    <i class="bi bi-clipboard-x text-muted" style="font-size: 4rem;"></i>
                    <h3 class="mt-3 text-muted">暂无任务</h3>
                    <p class="text-muted">点击"新建任务"开始创建您的第一个任务</p>
                    <button class="btn btn-primary" onclick="document.getElementById('newTaskBtn').click()">
                        <i class="bi bi-plus-circle me-1"></i>新建任务
                    </button>
                </div>
            </div>
            
            <!-- 分页 -->
            <div class="d-flex justify-content-between align-items-center mt-4 d-none" id="paginationContainer">
                <div class="text-muted" id="paginationInfo">
                    第 1 页，共 1 页
                </div>
                
                <nav aria-label="任务列表分页">
                    <ul class="pagination mb-0" id="paginationList">
                        <!-- 分页按钮将通过JavaScript动态生成 -->
                    </ul>
                </nav>
            </div>
        </section>
    </main>

    <!-- 任务详情面板 (侧边栏) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="taskDetailPanel" aria-labelledby="taskDetailPanelLabel" style="width: 650px;">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title d-flex align-items-center" id="taskDetailPanelLabel">
                <i class="bi bi-clipboard-check me-2 text-primary"></i>
                <div>
                    <span class="badge bg-secondary me-2" id="detailTaskId">T001</span>
                    <span id="detailTaskTitle">任务标题</span>
                </div>
            </h5>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-primary" id="editDetailBtn">
                    <i class="bi bi-pencil"></i> 编辑
                </button>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" id="closeDetailBtn"></button>
            </div>
        </div>
        
        <div class="offcanvas-body">
            <!-- 基本信息 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white py-2">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>基本信息
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="detailStatus" class="form-label fw-semibold">状态</label>
                            <select id="detailStatus" class="form-select" disabled>
                                <option value="TODO">待办</option>
                                <option value="IN_PROGRESS">进行中</option>
                                <option value="PENDING_REVIEW">待验证</option>
                                <option value="COMPLETED">已完成</option>
                                <option value="BLOCKED">已阻塞</option>
                                <option value="PAUSED">暂停</option>
                                <option value="CANCELLED">已取消</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="detailPriority" class="form-label fw-semibold">优先级</label>
                            <select id="detailPriority" class="form-select" disabled>
                                <option value="URGENT">紧急</option>
                                <option value="HIGH">高</option>
                                <option value="MEDIUM">中</option>
                                <option value="LOW">低</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <label for="detailAssignee" class="form-label fw-semibold">负责人</label>
                            <select id="detailAssignee" class="form-select" disabled>
                                <option value="">未分配</option>
                                <!-- 开发者选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="detailEstimatedHours" class="form-label fw-semibold">预估工时</label>
                            <input type="number" id="detailEstimatedHours" class="form-control" step="0.5" disabled>
                        </div>
                    </div>
                    
                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <label for="detailActualHours" class="form-label fw-semibold">已投入工时</label>
                            <input type="number" id="detailActualHours" class="form-control" step="0.5" disabled>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="detailProgress" class="form-label fw-semibold">任务进度</label>
                            <div class="input-group">
                                <input type="number" id="detailProgress" class="form-control" min="0" max="100" disabled>
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <label for="detailRequirement" class="form-label fw-semibold">所属需求</label>
                            <select id="detailRequirement" class="form-select" disabled>
                                <option value="">无关联需求</option>
                                <!-- 需求选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <!-- 空列，保持布局平衡 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 详细信息 -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white py-2">
                    <h6 class="mb-0">
                        <i class="bi bi-file-text me-2"></i>详细信息
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="detailDescription" class="form-label fw-semibold">任务描述</label>
                        <textarea id="detailDescription" class="form-control" rows="4" disabled></textarea>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="detailCreatedAt" class="form-label fw-semibold">创建时间</label>
                            <input type="text" id="detailCreatedAt" class="form-control" disabled>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="detailUpdatedAt" class="form-label fw-semibold">更新时间</label>
                            <input type="text" id="detailUpdatedAt" class="form-control" disabled>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header bg-warning text-dark py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="bi bi-list-task me-2"></i>子任务 (<span id="subtaskCount">0</span>)
                        </h6>
                        <button class="btn btn-sm btn-outline-dark" id="addSubtaskBtn" disabled>
                            <i class="bi bi-plus-circle me-1"></i>添加子任务
                        </button>
                    </div>
                </div>
                
                <div class="card-body">
                    <div id="subtasksList">
                        <!-- 子任务列表将通过JavaScript动态填充 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建/编辑任务侧边栏 -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="taskEditOffcanvas" aria-labelledby="taskEditOffcanvasLabel" style="width: 650px;">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title d-flex align-items-center" id="modalTitle">
                <i class="bi bi-plus-circle me-2 text-primary"></i>
                <span>新建任务</span>
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" id="closeModalBtn"></button>
        </div>
        
        <div class="offcanvas-body">
            <form id="taskForm">
                <input type="hidden" id="taskId">
                
                <!-- 基本信息 -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>基本信息
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="taskTitle" class="form-label fw-semibold">任务标题 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="taskTitle" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="taskParent" class="form-label fw-semibold">父任务</label>
                            <select class="form-select" id="taskParent">
                                <option value="">无父任务</option>
                                <option th:each="parentTask : ${parentTasks}" 
                                        th:value="${parentTask.id}" 
                                        th:text="${parentTask.title}">父任务</option>
                            </select>
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="taskStatus" class="form-label fw-semibold">状态</label>
                                <select class="form-select" id="taskStatus">
                                    <option value="TODO">待办</option>
                                    <option value="IN_PROGRESS">进行中</option>
                                    <option value="PENDING_REVIEW">待验证</option>
                                    <option value="COMPLETED">已完成</option>
                                    <option value="BLOCKED">已阻塞</option>
                                    <option value="PAUSED">暂停</option>
                                    <option value="CANCELLED">已取消</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="taskPriority" class="form-label fw-semibold">优先级</label>
                                <select class="form-select" id="taskPriority">
                                    <option value="URGENT">紧急</option>
                                    <option value="HIGH">高</option>
                                    <option value="MEDIUM" selected>中</option>
                                    <option value="LOW">低</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <label for="taskEstimatedHours" class="form-label fw-semibold">预估工时 (小时)</label>
                                <input type="number" class="form-control" id="taskEstimatedHours" step="0.5" min="0">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="taskActualHours" class="form-label fw-semibold">已投入工时 (小时)</label>
                                <input type="number" class="form-control" id="taskActualHours" step="0.5" min="0">
                            </div>
                        </div>
                        
                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <label for="taskRequirement" class="form-label fw-semibold">所属需求</label>
                                <select class="form-select" id="taskRequirement">
                                    <option value="">请选择需求</option>
                                    <!-- 需求选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="taskProgress" class="form-label fw-semibold">任务进度</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="taskProgress" min="0" max="100" step="1">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <label for="taskAssignee" class="form-label fw-semibold">负责人</label>
                            <select class="form-select" id="taskAssignee">
                                <option value="">未分配</option>
                                <!-- 开发者选项将通过JavaScript动态加载 -->
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 详细信息 -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white py-2">
                        <h6 class="mb-0">
                            <i class="bi bi-file-text me-2"></i>详细信息
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="taskDescription" class="form-label fw-semibold">任务描述</label>
                            <textarea class="form-control" id="taskDescription" rows="4" placeholder="请详细描述任务内容、要求和验收标准..."></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary" id="saveTaskBtn">
                        <i class="bi bi-check-circle me-1"></i>保存任务
                    </button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas" id="cancelModalBtn">
                        <i class="bi bi-x-circle me-1"></i>取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 批量操作模态框 -->
    <div class="modal fade" id="batchModal" tabindex="-1" aria-labelledby="batchModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="batchModalLabel">批量操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeBatchModalBtn"></button>
                </div>
            
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>已选择 <span id="batchSelectedCount">0</span> 个任务
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary batch-action-btn" data-action="status">
                            <i class="bi bi-arrow-repeat me-2"></i>批量修改状态
                        </button>
                        <button class="btn btn-outline-warning batch-action-btn" data-action="priority">
                            <i class="bi bi-exclamation-triangle me-2"></i>批量修改优先级
                        </button>
                        <button class="btn btn-outline-info batch-action-btn" data-action="assignee">
                            <i class="bi bi-person-plus me-2"></i>批量分配负责人
                        </button>
                        <button class="btn btn-outline-danger batch-action-btn" data-action="delete">
                            <i class="bi bi-trash me-2"></i>批量删除
                        </button>
                    </div>
                    
                    <div class="mt-3" id="batchForm" style="display: none;">
                        <!-- 批量操作表单将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelBatchBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="executeBatchBtn" style="display: none;">执行操作</button>
                </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/task-management.js}"></script>
</body>
</html>